.preview{
    /** 背景图 */
    background-image: url("./../../assets/images/bg/header-bg.jpg");
    height: 100vh;
    width: 100%;

    /** 背景图设置 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    /** 弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;

    /** 溢出隐藏 */
    overflow: hidden;

    position: relative;
}

/** 向下箭头 */
.preview .preview-scroll {
    position: absolute;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 10px;
    /** 跳动动画 */
    animation: downIcon 1s ease-in-out infinite;
}

/** 星星样式 */
.stars {
    transform: perspective(500px);
    transform-style: preserve-3d;
    perspective-origin: 50% 100%;
    left: 45%;
    animation: rotate 90s infinite linear;
    bottom: 0;
}
.star {
    width: 10px;
    height: 10px;
    background: #f7f7b6;
    left: 0;
    top: 0;
    border-radius: 50%;
    backface-visibility: hidden;
}
/** 星星样式 */

/** 星星d动画 */
@keyframes rotate {
    0% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
    }
    100% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg)
        rotateY(-360deg);
    }
}

/** 向下箭头动画 */
@keyframes downIcon {
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-20px);
    }
}


